import React from 'react';
import {Button, Flex, Input, Space} from 'antd';
import {PlusOutlined, SyncOutlined} from "@ant-design/icons";
import "./TableToolbar.css";
import {Link} from 'react-router-dom';

const {Search} = Input;

/** 表格工具栏的属性约束 */
interface TableToolbarProps {
    /** 刷新按钮的回调 */
    refresh?: () => void,
    /**
     * 显示标题
     */
    title?: string,
    /**
     * 显示内容
     */
    info?: string | React.ReactNode,
    /** 新建数据按钮的跳转地址: 默认为add */
    addUrl?: string,
    /** 搜索按钮的回调函数 */
    search?: (value: string) => void,
    /**
     * 跳转路径携带的参数
     */
    skipState?: object
}

export default function TableToolbar(props: TableToolbarProps) {
    const [disabled, setDisabled] = React.useState(false);
    const refresh = () => {
        setDisabled(true);
        setTimeout(() => {
            setDisabled(false);
        }, 1000);
        props.refresh && props.refresh();
    };
    return (
        <Flex justify={"space-between"} style={{
            marginBottom: "8px",
            minWidth: "600px",
            paddingInline: "5px"
            // overflow: "hidden"
        }}>
            <div className="table-toolbar-info" style={{whiteSpace: "nowrap"}}>
                <span className="table-toolbar-info-t">{props.title ?? "数据量"}</span>
                <span className="table-toolbar-info-c">{props.info}</span>
            </div>
            <Space size={10}>
                <Search width={150}
                        placeholder="input search text"
                        allowClear
                        enterButton="Search"
                        onSearch={props.search}
                />
                <Button icon={<SyncOutlined spin={disabled}/>} disabled={disabled} onClick={refresh}>刷新</Button>
                <Button type="primary" icon={<PlusOutlined/>}>
                    <Link to={"add" ?? props.addUrl} state={props.skipState}>添加数据</Link>
                </Button>
            </Space>

        </Flex>
    );
}
